<template>
  <div class="page-container">
    <el-card shadow="none">
      <el-form inline>
        <el-form-item>
          <el-input v-model="searchParams.name" placeholder="输入姓名" />
        </el-form-item>
        <el-form-item>
          <ElSelectTree
            v-model="searchParams.deptId"
            placeholder="请选择部门"
            :data="deptList"
            node-key="id"
            :props="{
              label: 'deptName',
              children: 'children'
            }"
            check-strictly
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="table-box">
        <el-table
          v-loading="loading"
          :data="tableData"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          @selection-change="onSelect"
        >
          <el-table-column type="index" width="80px" label="序号" align="center" />
          <el-table-column
            v-for="item in columns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            align="center"
          />
        </el-table>
      </div>
      <div class="page-box">
        <el-pagination
          background
          :current-page="pageNo"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="changePageSize"
          @current-change="changePageNo"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import crud from '@/mixins/crud'
import { http_dept, http_user } from '@/api'
export default {
  mixins: [crud],
  data() {
    return {
      request: http_user,
      searchParams: {
        name: '',
        deptId: ''
      },
      deptList: [],
      tableData: [
      ],
      columns: [
        { prop: 'deptName', label: '部门', width: '', minWidth: '' },
        { prop: 'nickname', label: '姓名', width: '', minWidth: '' },
        { prop: 'phone', label: '电话', width: '', minWidth: '' },
        { prop: 'roleNames', label: '角色', width: '', minWidth: '' }
      ]
    }
  },
  created() {
    http_dept.tree().then(res => {
      this.deptList = res
    })
  },
  methods: {
    formatTableData(tableData) {
      tableData.forEach(v => {
        v.roleNames = v.roleNameList.join(',')
      })
    }
  }
}
</script>

<style lang="scss">
.page-container {
  height: 100%;
}
</style>
